<template>
  <div class="product-manage">
    <!-- 搜索和操作区域 -->
    <div class="operation-bar">
      <div class="search-area">
        <el-input
          v-model="searchModel.condition"
          placeholder="请输入搜索内容"
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="load()">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
      </div>
      <div class="action-area">
        <el-button type="primary" @click="add()">
          <el-icon><Plus /></el-icon>
          新增
        </el-button>
        <el-button type="danger" @click="deleteSelected()">
          <el-icon><Delete /></el-icon>
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table
        :data="produList"
        stripe
        border
        highlight-current-row
        @selection-change="handleSelectionChangeDepartment"
        class="custom-table"
      >
        <el-table-column type="selection" width="55" align="center" />
        
        <el-table-column
          align="center"
          label="项目ID"
          prop="productId"
          width="100"
        />
        
        <el-table-column
          align="center"
          label="项目分类"
          prop="categoryId"
          width="120"
        />
        
        <el-table-column
          align="center"
          label="项目名称"
          prop="productName"
          min-width="180"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="百度网盘"
          prop="netdiskUrl"
          min-width="180"
        />
        <el-table-column
          align="center"
          label="项目价格"
          prop="price"
          width="100"
        >
          <template #default="scope">
            <span class="price">￥{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          align="center"
          label="项目图片"
          width="150"
        >
          <template #default="scope">
            <el-image
              class="product-image"
              :src="scope.row.imageUrl"
              fit="cover"
              :preview-src-list="[scope.row.imageUrl]"
            >
              <template #error>
                <div class="image-error">
                  <el-icon><Picture /></el-icon>
                  <span>暂无图片</span>
                </div>
              </template>
              <template #placeholder>
                <div class="image-loading">
                  <el-icon><Loading /></el-icon>
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        
        <el-table-column
          align="center"
          label="操作"
          width="180"
          fixed="right"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row)"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-popconfirm
              title="确定要删除吗?"
              @confirm="handleDelete(scope.row)"
              confirm-button-text="确定"
              cancel-button-text="取消"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                >
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="searchModel.pageNow"
        v-model:page-size="searchModel.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        background
      />
    </div>
  </div>
</template>

<script>
import productApi from "@/api/product.js";
import { ElMessage } from "element-plus";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import { Search, Picture, Loading, Plus, Delete, Edit } from "@element-plus/icons-vue";
import store from "@/store";
export default {
  components: {
    Picture,
    Loading,
    Plus,
    Delete,
    Edit
  },
  data() {
    return {
      produList: [],
      totalCount: 0, // 总数默认为0
      searchModel: {
        pageNow: 1,
        pageSize: 10,
        condition: "",
        formTitle: "",
      },
      editDialogVisible: false,
      editprodu: [],
      produRoleList: [],
      allRole: [],
      multipleSelectionDepartment: [],
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      let pageInfo = {
        page: this.searchModel.pageNow,
        size: this.searchModel.pageSize,
        keyword: this.searchModel.condition,
      };
      productApi.Mlist(pageInfo).then((res) => {
        console.log('产品列表数据:', res.data);
        this.produList = res.data;
      }).catch(error => {
        console.error('加载产品列表失败:', error);
        ElMessage.error('加载失败，请稍后重试');
      });
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNow) {
      this.searchModel.pageNow = pageNow;
      this.load();
    },
    handleEdit(product) {
      this.$router.push({
        name: "editer",
        query: { productId: product.productId },
      });
    },
    handleDelete(product) {
      console.log(product.productId, "=========");
      productApi.deletePro(product.productId).then((res) => {
        ElMessage({
          message: "删除成功！",
          type: "success",
        });
      });
      this.load();
    },
    clearForm() {},
    closeForm() {},
    updateprodu() {},
    add() {
      this.$router.push({ name: "editer" });
    },
    //批量删除
    handleSelectionChangeDepartment(val) {},
    deleteSelected() {},
  },
};
</script>
<style scoped>
.product-manage {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 搜索和操作区域样式 */
.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.search-area {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input {
  width: 300px;
}

.action-area {
  display: flex;
  gap: 12px;
}

/* 表格容器样式 */
.table-container {
  margin-bottom: 20px;
}

.custom-table {
  width: 100%;
  margin-bottom: 20px;
}

/* 图片样式 */
.product-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
}

.image-error,
.image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: #f5f7fa;
  color: #909399;
}

.image-error .el-icon,
.image-loading .el-icon {
  font-size: 20px;
  margin-bottom: 8px;
}

/* 价格样式 */
.price {
  color: #f56c6c;
  font-weight: bold;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

/* 按钮图标样式 */
.el-button .el-icon {
  margin-right: 4px;
}

/* 表格hover效果 */
:deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}

/* 表格斑马纹颜色 */
:deep(.el-table--striped .el-table__row--striped) {
  background-color: #fafafa;
}

/* 表格边框颜色 */
:deep(.el-table--border) {
  border-color: #ebeef5;
}

/* 表格头部样式 */
:deep(.el-table__header-wrapper th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}
</style>
